<template>
  <!--   // 商品列表模块 -->
  <div class="goods-container">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表·</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加商品弹窗 -->
    <el-dialog title="添加商品" :visible.sync="goodsDislog" width="30%">
      <el-form :model="goodsItems" :rules="addGoodsRules" ref="goodsForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="goodsItems.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input v-model="goodsItems.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_price">
          <el-input v-model="goodsItems.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input v-model="goodsItems.goods_weight"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="goods_cat">
          <el-input v-model="goodsItems.goods_cat"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍" prop="goods_introduce">
          <el-input v-model="goodsItems.goods_introduce"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="goodsDislog = false">取 消</el-button>
        <el-button type="primary" @click="addGoods">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑商品弹窗 -->
    <el-dialog title="添加商品" :visible.sync="editGoodsDislog" width="30%">
      <el-form :model="editGoodsList" :rules="addGoodsRules" ref="editForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="editGoodsList.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input v-model="editGoodsList.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_price">
          <el-input v-model="editGoodsList.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input v-model="editGoodsList.goods_weight"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="goods_cat">
          <el-input v-model="editGoodsList.goods_cat" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍" prop="goods_introduce">
          <el-input v-model="editGoodsList.goods_introduce"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editGoodsDislog = false">取 消</el-button>
        <el-button type="primary" @click="addEitGoods">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 卡片区域 -->
    <el-card shadow="always">
      <!-- 搜索区域 -->
      <el-row :gutter="40">
        <el-col :span="8"> <el-input placeholder="请输入内容" v-model="queryInfo.query">
            <el-button slot="append" icon="el-icon-search" @click="searchGoods"></el-button>
          </el-input></el-col>
        <el-col :span="8"> <el-button type="primary" @click="goodsDislog = !goodsDislog">添加商品</el-button></el-col>
      </el-row>
      <!-- Table区域 -->
      <el-table stripe style="width: 100%" :data="goodsList">
        <el-table-column type="index" label="#" align="center">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" align="center">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)" align="center">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" align="center">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="editGoods(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteGoods(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: { // 查找数据
        query: '', // 查询参数
        pagenum: 1, // 当前页码
        pagesize: 1 // 每页条数
      },
      goodsList: [], // 商品数据
      total: 0, // 总数据条数
      goodsDislog: false, // 添加商品弹窗
      goodsItems: {
        goods_name: '', // 商品名称·
        goods_cat: '', // 分类列表 1，2，3
        goods_price: '', // 价格
        goods_number: '', // 数量
        goods_weight: '', // 重量
        goods_introduce: '', // 介绍
        pics: '',
        attrs: ''
      }, // 添加商品
      addGoodsRules: {
        goods_name: [{ required: true, message: '请输入商品名称·', trigger: 'blur' }],
        goods_cat: [{ required: true, message: '请输入分类列表', trigger: 'blur' }],
        goods_price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        goods_number: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        goods_weight: [{ required: true, message: '请输入重量', trigger: 'blur' }]
      },
      editGoodsList: { // 编辑商品,
        goods_id: '',
        goods_name: '', // 商品名称·
        goods_cat: '', // 分类列表 1，2，3
        goods_price: '', // 价格
        goods_number: '', // 数量
        goods_weight: '', // 重量
        goods_introduce: '', // 介绍
        pics: '',
        attrs: ''
      },
      editGoodsDislog: false // 编辑商品弹窗

    }
  },
  created() {
    this.getGoods()
  },
  methods: {
    async getGoods() {
      const { data: res } = await this.$http.get('/goods', { params: this.queryInfo })
      // 对响应回来的数据进行校验
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.goodsList = res.data.goods
      this.total = res.data.total
    },
    // 监听页数变化
    handleSizeChange(newPageSize) {
      this.queryInfo.pagesize = newPageSize
      this.getGoods()
    },
    // currentPage 改变时会触发
    handleCurrentChange(newPageNum) {
      this.queryInfo.pagenum = newPageNum
      this.getGoods()
    },
    // 查询参数
    async searchGoods() {
      this.getGoods()
    },
    // 添加商品
    addGoods() {
      this.$refs.goodsForm.validate(async (valid) => {
        if (!valid) {
          this.$message.error('请正确输入信息')
        } else {
          const { data: res } = await this.$http.post('/goods', this.goodsItems)
          // 对相应回来的数据进行校验
          if (res.meta.status !== 201) return this.$message.error('添加失败')
          this.getGoods()
          this.goodsDislog = false
          this.$refs.goodsForm.resetFields()
          this.$message.success('添加成功')
        }
      })
    },
    // 删除商品
    async deleteGoods(val) {
      // 要删除的商品ID
      const deleteId = val.goods_id
      const { data: res } = await this.$http.delete('/goods/' + deleteId)
      // 对相应回来的数据进行校验
      if (res.meta.status !== 200) return this.$message.error('添加失败')
      this.getGoods()
      this.$message.success('删除成功')
    },
    // 编辑商品
    editGoods(val) {
      this.editGoodsList.goods_name = val.goods_name
      this.editGoodsList.goods_price = val.goods_price
      this.editGoodsList.goods_number = val.goods_number
      this.editGoodsList.goods_weight = val.goods_weight
      this.editGoodsList.goods_cat = '1,2,3'
      this.editGoodsList.goods_id = val.goods_id
      this.editGoodsDislog = true
    },
    addEitGoods() {
      this.$refs.editForm.validate(async valid => {
        if (!valid) {
          this.$message.error('请正确输入信息')
        } else {
          const { data: res } = await this.$http.put('/goods/' + this.editGoodsList.goods_id, this.editGoodsList)
          // 对相应回来的数据进行校验
          console.log(res)
          if (res.meta.status !== 200) return this.$message.error('修改失败')
          this.getGoods()
          this.editGoodsDislog = false
          this.$message.success('修改成功')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.goods-container {
  .el-card {
    margin: 20px 0;
  }

  .el-table {
    margin: 20px 0;
  }
}
</style>
